<!--后台界面-->
{% extends 'personalLayout.html' %}
{% load static %}
{% block title %}
    <title>囍管家——后台管理</title>
{% endblock %}
{% block css %}
    <link href="{% static 'plugins/calendar/css/style.css' %} " rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{% static 'css/personal.css' %}">
{% endblock %}

{% block content %}
    <!--外层容器-->
    <div class="layout-div">
        <!-- part1 -->
        <div class="part" id="part1">
            <div class="calendar-mask">
                <div class="left">
                    <div id="day-month" style="color:#0065ca"></div>
                    <div id="task-count"><i
                            class="fa fa-dashboard"></i>&nbsp;剩余任务数量：<span>{{ result.calendar_mask.surplus_task }}</span>
                    </div>
                    <div id="mem-day"><i
                            class="fa fa-coffee"></i>&nbsp;跟进项：<span>{{ result.calendar_mask.follow_task }}</span></div>
                    <a id="btn-change" href="#part2">全部日历安排</a>
                </div>
                <div class="right">
                    <span id="week-show"></span>
                </div>
            </div>
            <div class="sales-pre">
                <h2 style="height:70px;line-height:70px;font-weight:bold;font-size: 28px;padding-left: 60px;"><i
                        class="fa fa-calendar-minus-o" style="color:#c0a16b"></i>&nbsp;销售简报</h2>
                <div class="sales-pre-bottom">
                    <div class="left">
                        <p><i class="fa fa-handshake-o"></i>&nbsp;销售机会：<span>{{ result.sales_kit.sales_chance }}</span>
                        </p>
                        <p><i class="fa fa-bar-chart"></i>&nbsp;签单量/个：<span>{{ result.sales_kit.signed_count }}</span>
                        </p>
                        <p><i class="fa fa-money"></i>&nbsp;签单额/元：<span>{{ result.sales_kit.signed_amount }}</span></p>
                    </div>
                    <div class="right">
                        <p><i class="fa fa-calendar-o"></i>&nbsp;待分配：<span>{{ result.sales_kit.need_allocated }}</span>
                        </p>
                    </div>
                </div>

            </div>
        </div>
        <!-- part1-bottom -->
        <div class="part">
            <div class="task-list">
                <div class="task">
                    <h2><i class="fa fa-hourglass" style="color:#c0a16b"></i>&nbsp;已完成订单</h2>
                    <div class="task-detail">
                        <div>
                            <p>已执行订单（个）</p>
                            <p>{{ result.order_completed.executed_orders }}</p>
                        </div>
                        <div>
                            <p>执行订单额（元）</p>
                            <p>{{ result.order_completed.executed_order_amount }}</p>
                        </div>
                        <div>
                            <p>自主签单比（占比）</p>
                            <p>{{ result.order_completed.independent_sign_ratio }}</p>
                        </div>
                    </div>
                </div>
                <div class="task">
                    <h2><i class="fa fa-hourglass-half" style="color:#c0a16b"></i> 未完成订单</h2>
                    <div class="task-detail">
                        <div>
                            <p>本月（单）</p>
                            <p>{{ result.order_incomplete.this_month }}</p>
                        </div>
                        <div>
                            <p>下月（单）</p>
                            <p>{{ result.order_incomplete.next_month }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="charts"></div>
        </div>
        <!-- part2 -->
        <div class="part" id="part2">
<!--            <div style="position: absolute;width: 100%;height: 100%;  border-radius: 15px;-->
<!-- background: #0F9E5E;z-index: 999;opacity: 0.6;"></div>-->
            <div id="calendar" style="width: 100%"></div>
        </div>
        <div class="part3">
            <div class="task-list">
                <div class="task">
                    <h2><i class="fa fa-calendar-check-o" style="color:#c0a16b"></i>&nbsp;已完成任务</h2>
                    <h4 class="date-today"></h4>
                    <div class="task-detail" id="completed">
                        {% for task in result.task_completed.detail %}
                            <p>{{ task }}</p>
                        {% endfor %}
                    </div>
                </div>
                <div class="task">
                    <h2><i class="fa fa-calendar-times-o" style="color:#c0a16b"></i>&nbsp;未完成任务</h2>
                    <h4 class="date-today"></h4>
                    <div class="task-detail" id="incomplete">
                        {% for task in result.task_incomplete.detail %}
                            <p>{{ task }}</p>
                        {% endfor %}
                    </div>
                </div>
            </div>

<!--            <img src="{% static 'img/logo_gold_bottom.png' %}" style=" margin: 0 auto; width:70%;opacity:0.4" alt="欢迎选择囍管家">-->
        </div>
    </div>

{% endblock %}
{% block other %}

{% endblock %}

{% block js %}
    <script src="{% static 'plugins/calendar/js/rolyart-calendar.js' %}"></script>
    <script src="{% static 'plugins/calendar/js/index.js' %}"></script>
    {#Echarts插件#}
    <script src="{% static 'plugins/echarts/dist/echarts.js' %}"></script>

    {#自定义js#}
    <script src="{% static 'js/personal.js' %}"></script>
{% endblock %}